<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>欢迎注册页面</title>
  </head>
  <style>
    div {
      width: 120px;
      margin: 10px auto;
      text-align: center;
    }
    span {
      display: inline-block;
      width: 50px;
      cursor: pointer;
    }
    img {
      vertical-align: middle;
      width: 30px;
      cursor: pointer;
    }
  </style>
  <body>
    <form action="#" method="get" target="_blank" enctype="multipart/form-data">
      <table>
        <tr>
          <th style="color: blue"><label for="phone">欢迎注册会员</label></th>
        </tr>
        <tr>
          <th><label for="phone">手机号码：</label></th>
          <td style="color: gray">
            <input
              type="text"
              name="phonenumber"
              placeholder="11位电话号"
              id="phone"
              style="color: gray"
            />
            <span style="color: red; font-size: small; font-weight: 700"
              >必填</span
            >
          </td>
        </tr>
        <tr>
          <th><label for="psw">创建密码：</label></th>
          <td style="color: gray">
            <input
              type="password"
              name="psw"
              id="psw"
              style="color: gray"
              maxlength="8"
              placeholder="8位密码"
            />
            <span style="color: red; font-size: small; font-weight: 700"
              >必填</span
            >
          </td>
        </tr>
        <tr>
          <th><label for="email">注册邮箱：</label></th>
          <td style="color: gray">
            <input
              type="text"
              name="email"
              placeholder="例如：wustzz@sina.com"
              id="email"
              style="color: gray"
            />
            <span style="color: red; font-size: small; font-weight: 700"
              >必填</span
            >
          </td>
        </tr>
        <!-- 验证码 -->
        <tr>
          <th class="black"><label for="sc">验证码：</label></th>
          <td>
            <input type="text" id="sc" name="sc" />
            <span id="capcha">4位验证码</span>
            <img src="images/arrow_03.png" id="change_capcha" />
            <script>
              let codeStr =
                "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
              //验证码长度
              let length = 4;
              let capcha = document.getElementById("capcha");
              let change_capcha = document.getElementById("change_capcha");
              // 用来生成一个[n,m]随机整数
              function getRandom(n, m) {
                return parseInt(Math.random() * (m - n + 1) + n);
              }
              // 将随机生成的整数下标对应的字母放入span中
              function getCode() {
                let str = "";
                // 验证码有几位就循环几次
                for (let i = 0; i < length; i++) {
                  let index = getRandom(0, 61);
                  str += codeStr.charAt(index);
                }
                capcha.innerHTML = str;
              }
              // 页面初始加载时就调用函数生成验证码，页面刷新也会执行
              getCode();
              // 点击刷新验证码
              capcha.addEventListener("click", getCode);
              change_capcha.addEventListener("click", getCode);
            </script>
          </td>
        </tr>

        <tr>
          <th>性别：</th>
          <td>
            <input type="radio" name="sex" id="nan" checked="checked" /><label
              for="nan"
              >男</label
            >
            <input type="radio" name="sex" id="nv" /><label for="nv">女</label>
          </td>
        </tr>
        <tr>
          <th><label for="bt">生日：</label></th>
          <td>
            <input type="date" name="birthday" id="bt" placeholder="年/月/日" />
          </td>
        </tr>
        <tr>
          <th><label for="age">年龄：</label></th>
          <td><input type="text" name="age" id="age" /></td>
        </tr>
        <tr>
          <th>籍贯：</th>
          <td>
            <select name="province">
              <option selected="selected">湖北省</option>
              <option></option>
            </select>
            <select name="city">
              <option selected="selected">武汉</option>
              <option></option>
            </select>
          </td>
        </tr>
        <tr>
          <th>个人学历：</th>
          <td>
            <select name="education">
              <option selected="selected">本科</option>
              <option></option>
            </select>
          </td>
        </tr>
        <tr>
          <th>月薪：</th>
          <td>
            <input
              type="range"
              id="money"
              name="money"
              min="0.0"
              max="10000.0"
              value="5000.0"
            />
            <span id="msg"></span>
            <script>
              var msg = document.getElementById("msg");
              window.onload = function () {
                msg.innerHTML = document.getElementById("money").value;
              };
              document.getElementById("money").onchange = function () {
                msg.innerHTML = this.value;
              };
            </script>
          </td>
        </tr>
        <tr>
          <th>个人爱好：</th>
          <td>
            <input type="checkbox" name="hobit" id="sing" /><label for="sing"
              >唱歌</label
            >
            <input type="checkbox" name="hobit" id="run" /><label for="run"
              >跑步</label
            >
            <input type="checkbox" name="hobit" id="swim" /><label for="swim"
              >游泳</label
            >
          </td>
        </tr>
        <!-- 图片预览 -->
        <tr>
          <th class="black">个人照片：</th>
          <td>
            <div
              id="test-image-preview"
              style="
                border: 0px solid silver;
                width: 90%;
                height: 0px;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
              "
            ></div>

            <input type="file" id="test-image-file" name="test" />
          </td>
        </tr>
        <script>
          var fileInput = document.getElementById("test-image-file");

          var preview = document.getElementById("test-image-preview");
          fileInput.addEventListener("change", function () {
            // 监听change事件
            preview.style.backgroundImage = ""; // 清除背景图片
            if (!fileInput.value) {
              return;
            }
            var file = fileInput.files[0]; // 获取File引用
            // 获取File信息:

            if (
              file.type !== "image/jpeg" &&
              file.type !== "image/png" &&
              file.type !== "image/gif"
            ) {
              alert("不是有效的图片文件!");
              return;
            }
            var reader = new FileReader(); // 读取文件
            reader.onload = function (e) {
              // 发起一个异步操作来读取文件内容
              var data = e.target.result; // data串形如： '...(base64编码)...'
              preview.style.height = 200 + "px";
              preview.style.backgroundImage = "url(" + data + ")";
            };
            reader.readAsDataURL(file); // 以DataURL的形式读取文件
          });
        </script>

        <tr>
          <th>个人简介：</th>
          <td>
            <textarea name="intro" id="intro" cols="30" rows="10"></textarea>
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <input type="submit" value="提交" />
            <input type="reset" value="重填" />
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>
